<!-- 自定义导航 -->
<!-- <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" title="库存明细"
@clickLeft="back" /> -->
<template>
	<view style="overflow-x: scroll;">
		<van-toast id="van-toast" />
		<van-cell title="选择日期区间" :value="date" @click="onDisplay" is-link />
		<van-cell :value="project_name" is-link @click="onDisplay2">
			<view slot="title">
				<view class="van-cell-text">请选择项目</view>
			</view>
		</van-cell>
		<van-action-sheet :show="show1" :actions="actions" @close="onClose1" @select="onSelect1" />
		<van-calendar :show="show" @close="onClose" @confirm="onConfirm" 
			:min-date='new Date(2022, 6, 1).getTime()' :max-date='new Date().getTime()' />
		<scroll-view :scroll-x="true" class="main">
			<view class="ttitle" style="width: 100%;background-color: gold;">
				<view style="min-width: 100rpx;">#</view>
				<view style="width: 100%;background-color: gold;">项目名称</view>
				<view style="width: 100%;background-color: gold;">材料名称</view>
				<view style="width: 100%;background-color: gold;">材料数量</view>
				<view style="width: 100%;background-color: gold;">单位</view>
				<view style="width: 100%;background-color: gold;">材料价格</view>
				<view style="width: 100%;background-color: gold;">最近入库时间</view>
			</view>
			<view v-for="item,index in moduleslist">
				<view class="ttitle">
					<view style="min-width: 100rpx;">{{index+1}}</view>
					<view style="width: 100%;">{{item.project__name}}</view>
					<view style="width: 100%;">{{item.modules__name}}</view>
					<view style="width: 100%;">{{item.materials_num}}</view>
					<view style="width: 100%;">{{item.modules__unit}}</view>
					<view style="width: 100%;">{{item.materials_price}}</view>
					<view style="width: 100%;">{{item.create_time}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
	} from "vue"
	export default {
		setup() {
			var date = ref('')
			var today = new Date().toLocaleDateString()
			var show = ref(false)
			var placelist = ref([])
			var moduleslist = ref([])
			var startDay = ref("")
			var endDay = ref("")
			var project_id = ref("")
			var project_name = ref("")
			var show1 = ref(false)
			var actions = ref([
				// {
				// 	name: '选项1',
				// },
				// {
				// 	name: '选项2',
				// },
				// {
				// 	name: '选项3',
				// },
			])
			var onClose1 = () => {
				show1.value = false
			}

			var onSelect1 = (event) => {
				console.log(event.detail);
				project_id.value = event.detail.id
				project_name.value = event.detail.name
				getNew()
			}
			// var proxy = getCurrentInstance()
			var onDisplay = () => {
				show.value = true
			}
			var onDisplay2 = () => {
				show1.value = true
			}
			var onClose = () => {
				show.value = false
			}
			var formatDate = (date) => {
				date = new Date(date);
				return `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate()+1}`;
			}
			var formatDate1 = (date) => {
				date = new Date(date);
				return `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate()}`;
			}
			var onConfirm = (event) => {
				show.value = false
				date.value = formatDate1(event.detail)
				startDay.value = formatDate(event.detail)
				endDay.value = formatDate(event.detail)
				getNew()
			}
			var getNew = () => {
				if (!project_id.value) {
					placelist.value = []
					moduleslist.value = []
					return false
				}
				uni.request({
					url: 'materials', //仅为示例，并非真实接口地址。
					method: "get",
					// header:{token:uni.getStorageSync('token')},
					header: {
						"Authorization": "Bearer" + " " + 'miniproject'
					},
					data: {
						project_id: project_id.value,
						page: 1,
						pagesize: 99999999999,
						start_time: startDay.value,
						end_time: endDay.value
					},
					success: (res) => {
						moduleslist.value = res.data.data.data
						console.log(moduleslist.value);
					}
				})
			}
			var getNew2 = () => {
				uni.request({
					url: 'project', //仅为示例，并非真实接口地址。
					method: "get",
					// header:{token:uni.getStorageSync('token')},
					header: {
						"Authorization": "Bearer" + " " + 'miniproject'
					},
					data: {

					},
					success: (res) => {
						actions.value = res.data.data
						// console.log(actions.value);
						getNew()
					}
				})
			}
			//获取到相应的token
			var getToken = () => {
				uni.request({
					url: 'login', //仅为示例，并非真实接口地址。
					method: "post",
					header: {

					},
					data: {
						phone: "13012345678",
						password: "123"
					},
					success: (res) => {
						console.log(res.data.token);
						uni.setStorageSync('token', res.data.token);
						getNew2()
					}
				})
			}
			onMounted(() => {
				// const data = proxy.axios.get('recoder/')
				// getToken()
				getNew2()
				// getNew()
			})
			return {
				date,
				show,
				onDisplay,
				onClose,
				formatDate,
				onConfirm,
				today,
				placelist,
				moduleslist,
				onClose1,
				onSelect1,
				show1,
				project_id,
				project_name,
				actions,
				onDisplay2
			}
		},
		onLoad(res) {
			console.log(res)
			this.project_id = res.project_id
			this.project_name = res.project_name
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.van-cell {
		width: 100%;
	}

	.ttitle {
		display: flex;
	}
	
	.ttitle>view {
		padding: 5rpx 10rpx;
		border: 1px solid black;
		min-width: 300rpx;
		box-sizing: border-box;
		text-align: center;
	}
	
</style>
